<template>
	<view class="bgBox">
		<!-- 搜索 -->
		<view class="searchNav">
			<u-search searchIconColor='#038B00' bgColor="#fff" border-color="#507847" v-model="searchValue"
				:showAction="false" @blur="goSearch()"></u-search>
			<u-icon name="/static/images/news.png" @click="gonavigate('/pages/news/news')" size="29"
				class="news"></u-icon>
		</view>

		<!-- 分类列表 -->
		<u-read-more :showHeight="80" :toggle="true" :shadowStyle="shadowStyle" closeText="展开">
			<u-parse>
				<u-tabs :list='categoryList1' lineColor='#038B00'></u-tabs>
				<u-tabs :list='categoryList2' lineColor='#038B00'></u-tabs>
				<u-tabs :list='categoryList3' @click="goItem" lineColor='#038B00'></u-tabs>
				<u-tabs :list='categoryList4' lineColor='#038B00'></u-tabs>
			</u-parse>
		</u-read-more>

		<!-- 商品列表 -->
		<goodList v-if="afterSearch.length>0" :afterSearch="afterSearch"></goodList>
		
		<!-- 空 -->
		<view v-else>
		    <view class="empty-box">
		        <u-empty icon="/static/images/hole.png" icon-size="150" mode="data" text-color="#038B00"></u-empty>
		        <navigator class="coreshop-btn" url="/pages/index/default/default" open-type="switchTab">随便逛逛</navigator>
		    </view>
		</view>
	</view>
</template>

<script>
import goodList from "@/components/index/goodList.vue"
import { data } from "../../../uni_modules/uview-ui/libs/mixin/mixin"
	export default {
		data() {
			return {		
				// 搜索数据
				afterSearch: [],
				// 搜索value
				searchValue: '',
				categoryList1: [{
						name: '为您推荐'
					},
					{
						name: '最新上架'
					},
					{
						name: '评论多'
					},
					{
						name: '价格低'
					},
					{
						name: '价格高'
					},
					{
						name: '收藏多'
					}
				],
				categoryList2: [{
						name: '全部材质'
					},
					{
						name: '翡翠'
					},
					{
						name: '和田玉'
					},
					{
						name: '琥珀'
					},
					{
						name: '财宝钻石'
					},
					{
						name: '木质藏品'
					}
				],
				categoryList3: [{
						name: '全部款式',
						type: ''
					},
					{
						name: '手镯',
						type: 0
					},

					{
						name: '串珠/链饰',
						type: 1
					},
					{
						name: '戒指',
						type: 2
					},
					{
						name: '耳饰/胸饰',
						type: ''
					},
					{
						name: '吊坠/挂件',
						type: ''
					}
				],
				categoryList4: [{
						name: '全部价格'
					},
					{
						name: '5000以下'
					},
					{
						name: '5000-5万'
					},
					{
						name: '5万-20万'
					},
					{
						name: '20万-50万'
					},
					{
						name: '50万以上'
					}
				],
				shadowStyle: {},
			}
		},
		components: {
			goodList
		},
		mounted() {
			// 加载全部goods
			uni.request({
				url: "http://localhost:3000/travel/getAllTravelsByPage",
				data: {
					currentPage: 1,
					pageSize:100,
				},
				success: (res) => {
					if (res?.data?.code == 200) {
						this.afterSearch = res.data.data.rows
					} else {
						this.$u.toast(res?.data?.msg)
					}
				},
				fail: (res) => {
					this.$u.toast(res?.data?.msg)
				}
			})
		},
		methods: {
			// 点击tabs得到分类goods
			goItem(item) {
				uni.request({
					url: "http://localhost:3000/travel/getAllTravelsByPage",
					data: {
						currentPage: 1,
						pageSize:100,
						type: item.type,
					},
					success: (res) => {
						if (res?.data?.code == 200) {
							this.afterSearch = res.data.data.rows
						} else {
							this.afterSearch = ''
						}
					},
					fail: (res) => {
						this.$u.toast(res?.data?.msg)
					}
				})
			},
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			},
			// 搜索
			goSearch() {
				uni.request({
					url: "http://localhost:3000/travel/getAllTravelsByPage",
					data: {
						currentPage: 1,
						pageSize: 100,
						travelName: this.searchValue,
					},
					success: (res) => {
						if (res?.data?.code == 200) {
							this.afterSearch = res.data.data.rows
						} else {
							this.afterSearch = ''
						}
					},
					fail: (res) => {
						this.$u.toast(res?.data?.msg)
					}
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.bgBox {
		.searchNav {
			display: flex;
			margin: $uni-spacing-row-lg;
		}

		/deep/ .u-read-more__content {
			text-indent: 0;
		}

		/deep/ .u-tabs {
			margin: 0 $uni-spacing-row-lg;
		}
		
		.empty-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 100px 0;
			.coreshop-btn{
				background-image: linear-gradient(120deg, #54af53 0%, #84ca8d 100%);
				font-size: $uni-font-size-base;
				border-radius: 12px;
				padding: $uni-spacing-col-sm $uni-spacing-row-lg;
				margin: $uni-spacing-col-lg 0;
				width: fit-content;
				color: $uni-bg-color-grey;
			}
		}
	}
</style>